<template>
  <div class="app-container location-wrap">
    <div class="left-wrap">
      <div class="left-header">
        <div class="header_bg">
          <h1 class="title">{{$t("vehicle.position.vehicleLocation")}}</h1>
          <el-radio-group v-model="radio" @change="handleChangeRadio">
            <el-radio :label="0" class="mr20">
              {{ $t("vehicle.position.total") }}({{
                vehicleCount.selected
              }})</el-radio
            >
            <el-radio :label="2" class="mr20"
              >{{ $t("vehicle.position.online") }}({{ vehicleCount.connect }})
            </el-radio>
            <el-radio :label="1" class="mr20"
              >{{ $t("vehicle.position.offline") }}({{ vehicleCount.disconnect }})
            </el-radio>
          </el-radio-group>
        
          <el-radio-group
            v-model="mapType"
            @change="changeMapType"
            v-show="showMap"
            class="header-mapRadio"
          >
            <el-radio label="roadmap" class="mr10">{{
             $t("vehicle.position.planeGraph")
            }}</el-radio>
            <el-radio label="satellite" class="mr10">{{
              $t("vehicle.position.satelliteImage")
            }}</el-radio>
          </el-radio-group>
        </div>
     
      </div>
      <Map v-show="showMap" :options="mapOptions" ref="maps" />
      <div v-show="!showMap" class="table-wrap">
        <el-table
          border
          v-loading="loading"
          :data="deviceList"
          height="80%"
          :empty-text="$t('device.nofound')"
        >
          <el-table-column
            :label="$t('device.imei')"
            align="center"
            prop="deviceCode"
            show-overflow-tooltip
          />
          <el-table-column
            :label="$t('member.state')"
            align="center"
            prop="state"
            show-overflow-tooltip
            >\
            <template slot-scope="scope">
              <span>{{
                scope.row.state == 1
                  ? $t("location.offOnline")
                  : scope.row.state == 2
                  ? $t("location.online")
                  : scope.row.state == 3
                  ? $t("location.unbind")
                  : ""
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('location.batteryPower')"
            align="center"
            prop="socRange"
            show-overflow-tooltip
          />
          <el-table-column
            :label="$t('location.posTime')"
            align="center"
            prop="recvTime"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.recvTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('location.speed')"
            align="center"
            prop="speed"
            show-overflow-tooltip
          />
          <el-table-column
            :label="$t('location.altitude')"
            align="center"
            prop="altitude"
            show-overflow-tooltip
          />
          <el-table-column
            :label="$t('location.posWay')"
            align="center"
            prop="type"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span>{{
                scope.row.type == 1
                  ? $t("location.basePost")
                  : $t("location.sPos")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('menu.VehicleLocation')"
            align="center"
            prop="address"
            show-overflow-tooltip
          />
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getLocations"
        />
      </div>
    </div>

    <div class="right-wrap ml0">

      <el-form :model="queryParams" ref="queryForm" :inline="true" >
              <el-form-item :label="$t('device.center.import.deviceTypeId')" prop="deviceTypeId">
                  <el-select v-model="queryParams.deviceType" :placeholder="$t('device.center.import.uploadRules.deviceTypeId')" clearable size="small" style="width: 200px" @change="deviceTypeChange">
                    <el-option v-for="dict in deviceTypeOptions"
                               :key="dict.value" :label="dict.label" :value="dict.value" />
                  </el-select>
                </el-form-item>
                <el-form-item :label="$t('device.center.import.deviceModelId')" prop="deviceModelId">
                  <el-select v-model="queryParams.deviceModel" :placeholder="$t('device.center.import.uploadRules.deviceModelId')" clearable size="small" style="width: 200px">
                    <el-option v-for="dict in deviceModelOptions"
                               :key="dict.value" :label="dict.label" :value="dict.value" />
                  </el-select>
                </el-form-item>
                <el-form-item :label="$t('device.center.deviceCode')" prop="deviceCode">
                  <el-input v-model="queryParams.deviceCode" :placeholder="$t('device.center.placeholder.deviceCode')" style="width: 200px" clearable size="mini"
                    @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item :label="$t('vehicle.brand.vehicleType')" prop="vehicleType">
                  <el-select v-model="queryParams.vehicleType" :placeholder="$t('vehicle.type.placeholder.vehicleModel')" clearable size="small" style="width: 200px" @change="handleQuery">
                    <el-option v-for="(dict,index) in vehicleTypeList"
                               :key="dict.id" :label="dict.typeName" :value="dict.id" />
                  </el-select>
                </el-form-item>
                <el-form-item :label="$t('vehicle.position.vehicleVinCode')" prop="vehicleVin">
                  <el-input v-model="queryParams.vehicleVin" :placeholder="$t('vehicle.journey.placeholder.vehicleVin')" style="width: 200px" clearable size="mini" />
                </el-form-item>
          
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{$t('vehicle.position.search')}}</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{$t('vehicle.position.regresh')}}</el-button>
            </el-form-item>

           
        </el-form>
       <div class="deviceTree" ref="treeRef">
        <el-tree   
        v-loading="treeLoading" :data="deptOptions" 
        :props="defaultProps" :expand-on-click-node="false" 
        :filter-node-method="filterNode" ref="tree" 
        default-expand-all @check="handleNodeClick" node-key="label" show-checkbox>
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span v-if="node.label !== 'honda'">
              <i class="tree-state" :class=" data.state === 1 ? 'connect-state' : data.state === 2  ? 'disconnect-state' : 'unbind-state'"></i>
            </span>
            <span>{{ node.label }}</span>
          </span>
        </el-tree>
      </div>
      <!--
      <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getLocationList"
        />
        -->
      </div>
      <!-- <el-pagination small layout="prev, pager, next" :total="50"></el-pagination> -->
      <!-- <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="gettoList"  /> -->

    </div>
</template>

<script>
import Map from "./map";
// import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import { modelTree } from "@/api/device/model";
import { typeTree } from "@/api/device/type";
import { listType } from "@/api/vehicle/type/data";
import { getDeviceModelTree } from "@/api/device/model";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
  vehicleMonitor
} from "@/api/vehicle/position/data";
import { getMapType } from "@/utils/auth";

export default {
  name: "VehicleLocation",
  components: { 
    Treeselect,
     Map },
  data() {
    return {
      deviceModelType:[],
      form: {
        deptId: "",
      },
      deptOptions: null,
      radio: 0,
      mapShow: true,
      vehicleCount: {
        connect: 0,
        disconnect: 0,
        unbind: 0,
        selected: 0,
      },
      mapType: "roadmap",
      filterText: "",
      queryParams: {
       deviceType:undefined,
       deviceModel:undefined,
       deviceCode:undefined,
       vehicleType:undefined,
       vehicleVin:undefined,
       pageSize: 20,
       pageNum: 1,
      },
      defaultProps: {
        children: "children",
        label: "label",
        disabled: function(data, node) {
          
        }
      },
      mapOptions: {
        posList: [],
        height: "calc(100vh - 120px)",
        mapType: "roadmap",
        state: 0,
      },
      showMap: true,
      loading: false,
      deviceList: [],
      mapDevices: [],
      total: 1,
      pageSize: 20,
      pageNum: 1,
      treeLoading: false,
      defaultCheckeds: [],
      treeData:[],
      deviceTypeOptions:[],
      deviceModelOptions:[],
      vehicleTypeList:[],
      flag:true
    };
  },
  computed: {
    toggleName() {
      return this.mapShow
        ? this.$t("location.listModel")
        : this.$t("location.mapModel");
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    
    this.getTypeTree();
    this.getTypeList();
    // this.getTheMapType();
    this.getLocations();
    this.gettoList();

  },
  mounted() {
     //右边的树形节点，下拉刷新
      const scrollview = this.$refs['treeRef']
      this.$nextTick(_=>{
        scrollview.addEventListener('scroll', this.scrollChange, true)
      })
   
 

  },
  methods: {
    resetQuery() {
        this.resetForm("form");
        this.handleQuery();
    },
    getTypeList(){
      listType().then(res =>{
        console.log(res);
        this.vehicleTypeList = res.rows;
      })

    },
    scrollChange(event){
      console.log("滑动");
      let target = event.target;
      const offsetHeight = target.offsetHeight;
      const scrollTop = target.scrollTop;
      const scrollHeight = target.scrollHeight;
      let $this = this;
      if ((offsetHeight + scrollTop) === scrollHeight) {
        setTimeout(function(){
          $this.queryParams.pageSize = 20;
          $this.queryParams.pageNum +=1;
          $this.gettoList();
        },100)
      } else {
          return false;
      }
    },
 
    handleQuery(){
      
      this.gettoList();
      this.getLocations();
    },
    gettoList(){
        getDeviceModelTree(this.queryParams).then(res=>{
          // console.log(res);
          //  this.deptOptions = res.data.newDeviceTreeList.rows;
          this.treeData = [];
           this.treeData = [...this.treeData,...res.data.newDeviceTreeList];
           this.deptOptions = this.treeData;

            this.total = res.data.newDeviceTreeList.length;
            console.log(this.treeData);
            console.log(this.deptOptions);
            console.log(this.total);
      })
    },
    deviceTypeChange(typeId) {
      if (typeId) {
        this.getModelTree(typeId)
      } else {
        this.queryParams.deviceModel = undefined;
        this.queryParams.deviceType = undefined
        this.deviceModelOptions = [];
        // this.deviceTypeOptions = [];
      }
    },
    getTypeTree() {
      console.log("类型");
      typeTree().then(res => {
        console.log("类型列表",res);
        this.deviceTypeOptions = res.data;
      });
    },
    
    getModelTree(typeId) {
      modelTree(typeId).then(response => {
        console.log(response);
        this.deviceModelOptions = response.data;
      });
    },
    getLocations() {
      console.log();
      vehicleMonitor({userCode:null,state:this.radio,vehicleType:this.queryParams.vehicleType}).then(res =>{
        
        if (this.flag) {
          this.vehicleCount.connect = res.data.onlineCount;
         this.vehicleCount.disconnect = res.data.offlineCount;
         this.vehicleCount.unbind = res.data.unBinding;

          this.vehicleCount.selected =
          this.vehicleCount.connect +
          this.vehicleCount.disconnect +
          this.vehicleCount.unbind;
          this.flag = false;
        }
       
        this.mapOptions.posList = res.data.vehicleDetailList;
        // this.mapDevices = res.data.vehicleDetailList;
      })
      
    },
   


   
    getTree() {
      this.treeLoading = true;
    
    },
    // 节点单击事件
    handleNodeClick(data) {
    //   var labvalojb = data; //暂存选中节点
    // this.$refs.tree.setCheckedKeys([]); //删除所有选中节点
    // this.$refs.tree.setCheckedNodes([labvalojb]); //选中已选中节点

                        
                        
      let params = { deviceCode: data.label };
      console.log(getMapType());
      if (getMapType() == 1) {
        this.$refs.maps.$refs.gmap.openInfoWindowClickOneMore(params);
      } else {
        this.$refs.maps.$refs.Baidu.openInfoWindowClickOneMore(params);
      }
      
    },
    //获取地图类型
    getTheMapType(){
      console.log(getMapType());
      let params = { deviceCode: data.label };
      console.log(getMapType());
      if (getMapType() == 1) {
        this.$refs.maps.$refs.gmap.handleMarker(params);
      } else {
        this.$refs.maps.$refs.Baidu.openInfoWindowClickOneMore(params);
      }
    },
    //关闭节点事件
    closes() {
      this.$refs.maps.$refs.gmap.handleMarkerclose();
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleChangeRadio(val) {
      console.log(val);
      this.radio = val;
     this.getLocations();
    },
    manualRefresh() {
      if (this.showMap) {
        this.getLocations();
      } else {
        // this.getLocationList();
      }
    },
    changeMapType(val) {
      this.mapOptions.mapType = val;
    },
    shiftMode() {
      this.showMap = !this.showMap;
      this.mapShow = !this.mapShow;
      if (!this.showMap && !this.deviceList.length) {
        // this.getLocationList();
      }
    },
    handleExport() {},
    handleCheckChange(node) {},

    handleSizeChange(val) {
      this.$emit('pagination', { page: this.currentPage, limit: val })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
    handleCurrentChange(val) {
      this.$emit('pagination', { page: val, limit: this.pageSize })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.location-wrap {
  display: flex;
  .left-wrap {
    flex: 1;
    position: relative;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);
    height: calc(100vh - 120px);
  }
  .left-header {
    
    left: 10px;
    right: 10px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 999;
  }
  .header_bg {
    background: #fff;
    border-radius: 4px;
    padding: 0 10px;
  }
  .title{
    display: inline-block;
    font-weight:bolder;
    margin-right: 50px;
  }
  .header-mapRadio{
    margin-left: 50px;
  }
  .header-mapRadio .el-radio__input {
    display: none;
    
  }
  .right-wrap {
    width:320px;
    height: calc(100vh - 120px);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);
    padding: 10px;
    box-sizing: border-box;
    .inline{
      display: flex;
    }
  }
}
.table-wrap {
  margin-top: 10px;
  padding: 0 10px;
  height: 100%;
}
.deviceTree {
  height: calc(100% - 40%);
  overflow: auto;
  background-color: 	#fff;
}
.tree-state {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}
.disconnect-state {
  background: #f4516c;
}
.connect-state {
  background: #34bfa3;
}
.unbind-state {
  background: #666666;
}
.divfen{
  width: 150px;
}

</style>
